<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>对象解构赋值</title>
</head>

<body>
  <script>
    // ============================== 对象解构 ==============================
    // const username = 'andy'

    // const user = {
    //   username: '小明',
    //   age: 18
    // }
    

    // 1. 对象解构赋值基本使用
    //    1.1 要求变量名和属性名必须一致
    //    1.2 如果变量名和属性名不一致，则默认为 undefined
    //    1.3 变量名不要和外面的变量名冲突，否则会报错
    // const{username,age}=user 
    // console.log(username,age)



    // 2. 练习：完成对象解构，并以此打印出值
   /*  const pig = { name: '佩奇', age: 6 }

     const{name,age}=pig
     console.log(name,age) */
   


    // 3. 更改解构变量名（重命名）  变量名: 新变量名
   /*  const username = 'andy'
    const user = {
      username: '小明',
      age: 18
    }
    const{username:uname,age}=user 
    console.log(username,uname,age) */

    // 4. 练习（需求：解构出对象的username 和 age）
    const arr = [
      {
        username: '小明',
        age: 18
      }
    ]

    const [{username,age}]=arr
    console.log(username,age)
  </script>
</body>

</html>